<template>
  <div>
    <!-- 账号管理 -->
    <div class="tabNav">
      <router-link to="/index">
        <img src="../assets/img/sidebar1.png" />首页
      </router-link>
      <router-link to="/accountManagement">
      <b class="colors"
        >/<img style="top: 1px" src="../assets/img/account.png" />账号管理</b
      >
      </router-link>
      <b>/<span style="margin-left: 10px">{{ $route.query.id == undefined ? '创建账号' : '详情' }}</span></b>
    </div>
    <el-row :gutter="24">
      <el-col :span="24">
        <el-card class="createAccount" shadow="hover">
          <div class="title">
            <div>{{ $route.query.id == undefined ? '创建账号' : '详情' }}</div>
            <el-divider></el-divider>
          </div>
          <div class="content">
            <el-form
              :model="createData"
              :rules="rules"
              ref="createData"
              label-width="160px"
              class="form-createData"
              :class="[detailsFlag ? 'flagXingxing' : '']"
            >
              <el-form-item label="平台名称" prop="name">
                <el-input
                  v-model="createData.name"
                  placeholder="请输入平台名称"
                  :disabled="detailsFlag"
                ></el-input>
              </el-form-item>
              <el-form-item label="企业名称" prop="enterpriseName">
                <el-input
                  v-model="createData.enterpriseName"
                  placeholder="请输入企业名称"
                  :disabled="detailsFlag"
                ></el-input>
              </el-form-item>
              <el-form-item label="法定代表人" prop="legalName">
                <el-input
                  v-model="createData.legalName"
                  placeholder="请输入法定代表人"
                  :disabled="detailsFlag"
                ></el-input>
              </el-form-item>
              <el-form-item label="公司成立日期" prop="createTime">
                <el-date-picker
                  v-model="createData.createTime"
                  type="date"
                  placeholder="请选择公司成立日期"
                  :disabled="detailsFlag"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item label="企业类型" prop="businessType">
                <el-select
                  v-model="createData.businessType"
                  placeholder="请选择企业类型"
                  :disabled="detailsFlag"
                >
                  <el-option
                    v-for="item in $store.state.companyTypeArr"
                    :key="item.dataCode+''"
                    :label="item.dataMsg"
                    :value="item.dataCode+''"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="所属行业" prop="industyCode">
                <el-select
                  v-model="createData.industyCode"
                  placeholder="请选择所属行业"
                  ref="industyValue"
                  :disabled="detailsFlag"
                >
                  <el-option
                    v-for="item in $store.state.industryArr"
                    :key="item.dataCode+''"
                    :label="item.dataMsg"
                    :value="item.dataCode+''"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="经营状态" prop="operationStatus">
                <el-select
                  v-model="createData.operationStatus"
                  placeholder="请选择经营状态"
                  ref="operationStatus"
                  :disabled="detailsFlag"
                >
                  <el-option
                    v-for="item in $store.state.managementStateArr"
                    :key="item.dataCode+''"
                    :label="item.dataMsg"
                    :value="item.dataCode+''"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="统一社会信用代码" prop="socialCreditCode">
                <el-input :disabled="detailsFlag" v-model="createData.socialCreditCode"></el-input>
              </el-form-item>
              <el-form-item label="营业期限">
                <el-date-picker
                  v-model="jingyingriqi"
                  type="daterange"
                  range-separator="~"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :disabled="detailsFlag"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item label="登记机关" prop="registerUnit">
                <el-input :disabled="detailsFlag" v-model="createData.registerUnit"></el-input>
              </el-form-item>
              <el-form-item label="企业地址" prop="address">
                <el-input :disabled="detailsFlag" v-model="createData.address"></el-input>
              </el-form-item>
              <el-form-item label="经营范围" prop="businessScope">
                <el-input :disabled="detailsFlag" type="textarea" v-model="createData.businessScope"></el-input>
              </el-form-item>
              <el-form-item label="所属银行" prop="bankName">
                <el-input :disabled="detailsFlag" v-model="createData.bankName"></el-input>
              </el-form-item>
              <el-form-item label="银行卡号" prop="bankNo">
                <el-input :disabled="detailsFlag" v-model="createData.bankNo"></el-input>
              </el-form-item>
              <el-form-item label="营业执照照片">
                <div class="upload-desc">
                  <el-upload
                    class="avatar-uploader"
                    action="#"
                    :disabled="detailsFlag"
                    :show-file-list="false"
                    :before-upload="beforeAvatarUpload"
                    accept=".jpg,.png"
                    :http-request="f => licenseUrlUpload(f, 1)"
                  >
                    <div class="upload-box">
                      <img
                        v-if="createData.licenseUrl"
                        :src="createData.licenseUrl"
                        class="avatar"
                      />
                      <img
                        v-else
                        width="24"
                        :src="require('/src/assets/img/uploadImage.png')"
                        class="avatar"
                      />
                      <i v-if="createData.licenseUrl != '' && !detailsFlag" @click.stop="removeFile('licenseUrl')" class="el-icon-error"></i>
                    </div>
                  </el-upload>
                  <div class="desc">
                    （支持JPG、PNG格式的文件，且大小不超过2M）
                    <div class="desc-chakan" v-if="createData.licenseUrl">
                      <i>{{ getFileName(createData.licenseUrl) }}</i>
                      <span @click="queryFile(createData.licenseUrl)">查看文件</span>
                    </div>
                  </div>
                </div>
              </el-form-item>
              <el-form-item label="合同/协议">
                <div class="upload-desc">
                  <el-upload
                    class="avatar-uploader"
                    action="#"
                    :disabled="detailsFlag"
                    :show-file-list="false"
                    :before-upload="beforeAvatarUpload"
                    accept=".jpg,.png,.PDF"
                    :http-request="f => licenseUrlUpload(f, 2)"
                  >
                    <div class="upload-box">
                      <template v-if="createData.agreementUrl">
                        <img
                          :src="createData.agreementUrl"
                          v-if="createData.agreementUrl.indexOf('.PDF') == -1 && createData.agreementUrl.indexOf('.pdf') == -1"
                          class="avatar"
                        />
                        <img
                          v-else
                          width="44"
                          :src="require('/src/assets/img/pdf.png')"
                          class="avatar"
                        />
                        <i v-if="createData.agreementUrl != '' && !detailsFlag" @click.stop="removeFile('agreementUrl')" class="el-icon-error"></i>
                      </template>
                      <img
                        v-else
                        width="24"
                        :src="require('/src/assets/img/uploadImage.png')"
                        class="avatar"
                      />
                    </div>
                  </el-upload>
                  <div class="desc">
                    （支持JPG、PNG、PDF格式的文件，且大小不超过2M）
                    <div class="desc-chakan" v-if="createData.agreementUrl">
                      <i>{{ getFileName(createData.agreementUrl) }}</i>
                      <span @click="queryFile(createData.agreementUrl)">查看文件</span>
                    </div>
                  </div>
                </div>
              </el-form-item>
              <el-form-item label="平台协议模板">
                <div class="upload-desc">
                  <el-upload
                    class="avatar-uploader"
                    action="#"
                    :disabled="detailsFlag"
                    :show-file-list="false"
                    :before-upload="beforeAvatarUpload"
                    accept=".PDF"
                    :http-request="f => licenseUrlUpload(f, 4)"
                  >
                    <div class="upload-box">
                      <template v-if="createData.platformAgreementModelUrl">
                        <img
                          :src="createData.platformAgreementModelUrl"
                          v-if="createData.platformAgreementModelUrl.indexOf('.PDF') == -1 && createData.platformAgreementModelUrl.indexOf('.pdf') == -1"
                          class="avatar"
                        />
                        <img
                          v-else
                          width="44"
                          :src="require('/src/assets/img/pdf.png')"
                          class="avatar"
                        />
                        <i v-if="createData.platformAgreementModelUrl != '' && !detailsFlag" @click.stop="removeFile('platformAgreementModelUrl')" class="el-icon-error"></i>
                      </template>
                      <img
                        v-else
                        width="24"
                        :src="require('/src/assets/img/uploadImage.png')"
                        class="avatar"
                      />
                    </div>
                  </el-upload>
                  <div class="desc">
                    （支持PDF格式的文件，且大小不超过2M）
                    <div class="desc-chakan" v-if="createData.platformAgreementModelUrl">
                      <i>{{ getFileName(createData.platformAgreementModelUrl) }}</i>
                      <span @click="queryFile(createData.platformAgreementModelUrl)">查看文件</span>
                    </div>
                  </div>
                </div>
              </el-form-item>
              <el-form-item label="灵工平台地址" prop="platformWebsiteUrl">
                <el-input :disabled="detailsFlag" placeholder="请输入灵工平台地址" v-model="createData.platformWebsiteUrl">
                  <template #prepend>Https://</template>
                </el-input>
              </el-form-item>
              <el-form-item label="企业端地址" prop="businessWebsiteUrl">
                <el-input :disabled="detailsFlag" placeholder="请输入企业端地址" v-model="createData.businessWebsiteUrl">
                  <template #prepend>Https://</template>
                </el-input>
              </el-form-item>
              <el-form-item label="用户端H5地址" prop="h5WebsiteUrl">
                <el-input :disabled="detailsFlag" placeholder="请输入用户端H5地址" v-model="createData.h5WebsiteUrl">
                  <template #prepend>Https://</template>
                </el-input>
              </el-form-item>
              <el-form-item label="平台logo">
                <el-upload
                  class="photo-uploader"
                  action="#"
                  :disabled="detailsFlag"
                  :show-file-list="false"
                  :before-upload="beforeAvatarUpload"
                  accept=".jpg,.png"
                  :http-request="f => licenseUrlUpload(f, 3)"
                >
                  <div class="upload-box">
                    <img
                      v-if="createData.logoUrl"
                      :src="createData.logoUrl"
                      class="avatar"
                    />
                    <img
                      v-else
                      width="24"
                      :src="require('/src/assets/img/img.jpg')"
                      class="avatar"
                    />
                  </div>
                </el-upload>
              </el-form-item>
              <el-form-item label="联系人姓名">
                <el-input :disabled="detailsFlag" v-model="createData.linkManName"></el-input>
              </el-form-item>
              <el-form-item label="联系人手机号">
                <el-input :disabled="detailsFlag" v-model="createData.linkManPhone"></el-input>
              </el-form-item>
              <el-form-item label="管理员账号" prop="platformAdmin">
                <el-input :disabled="detailsFlag" v-model="createData.platformAdmin"></el-input>
              </el-form-item>
              <el-form-item label="管理员密码">
                <div>
                  <div>默认密码为123456</div>
                  <el-button v-show="!detailsFlag" @click="resetPassword" class="create-button" size="mini">重置密码</el-button>
                </div>
              </el-form-item>
              <el-form-item label="平台模式" prop="selfMode">
                <el-select
                  v-model="createData.selfMode"
                  placeholder="请选择"
                  :disabled="detailsFlag"
                >
                  <el-option label="个体户模式" :value="1"></el-option>
                  <el-option label="自然人模式" :value="0"></el-option>
                  <el-option label="无感发薪模式" :value="3"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="是否录制意愿视频" prop="selfMode">
                <el-select
                  v-model="createData.showWishVideo"
                  placeholder="请选择"
                  :disabled="detailsFlag"
                >
                  <el-option label="是" :value="1"></el-option>
                  <el-option label="否" :value="0"></el-option>
                </el-select>
              </el-form-item>
              <!-- <el-form-item label="是否签署协议" prop="selfMode">
                <el-select
                  v-model="createData.showEsign"
                  placeholder="请选择"
                  :disabled="detailsFlag"
                >
                  <el-option label="是" :value="1"></el-option>
                  <el-option label="否" :value="0"></el-option>
                </el-select>
              </el-form-item> -->
              <el-form-item>
                <el-button v-if="$route.query.id == undefined" class="create-submit" @click="createZhanghao" type="primary">立即创建</el-button>
                <template v-else>
                  <el-button class="create-submit" v-show="detailsFlag" @click="detailsFlag=false" type="primary">修改</el-button>
                  <el-button class="create-submit" v-show="!detailsFlag"  @click="createZhanghao" type="primary">保存</el-button>
                </template>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "account",
  data() {
    return {
      detailsFlag: false,
      jingyingriqi: [],
      // 企业类型
      businessType: [
        {
          value: "0",
          label: "其他",
        },
        {
          value: "1",
          label: "个体工商户",
        },
        {
          value: "2",
          label: "有限责任公司",
        },
        {
          value: "3",
          label: "股份有限责任公司",
        },
        {
          value: "4",
          label: "合伙企业",
        },
        {
          value: "5",
          label: "个人独资企业",
        },
      ],
      // 所属行业
      industryType: [
        {
          value: "1",
          label: "广告",
        },
        {
          value: "2",
          label: "中介",
        },
        {
          value: "3",
          label: "美发",
        },
        {
          value: "4",
          label: "物流运输",
        },
        {
          value: "5",
          label: "培训",
        },
        {
          value: "6",
          label: "营销",
        },
        {
          value: "7",
          label: "机械组装",
        },
        {
          value: "8",
          label: "新媒体",
        },
        {
          value: "9",
          label: "其他服务行业",
        },
      ],
      operationStatus: [
        {
          value: "1",
          label: "存续",
        },
        {
          value: "2",
          label: "吊销",
        },
        {
          value: "3",
          label: "注销",
        },
        {
          value: "4",
          label: "迁出",
        },
        {
          value: "5",
          label: "迁入",
        },
        {
          value: "6",
          label: "停业",
        },
        {
          value: "7",
          label: "清算",
        },
      ],
      createData: {
        "address": "",
        "adminPassword": "123456",
        "agreementUrl": "",
        "allFee": "",
        "allTax": "",
        "billedAmount": "",
        "businessNum": "",
        "businessScope": "",
        "businessWebsiteUrl": "",
        "createTime": "",
        "endTime": "",
        "enterpriseName": "",
        "h5WebsiteUrl": "",
        "id": "",
        "industyCode": "",
        "industyMsg": "",
        "isDisable": "",
        "legalIdcard": "",
        "legalName": "",
        "legalPhone": "",
        "licenseUrl": "",
        "linkManName": "",
        "linkManPhone": "",
        "logoUrl": "",
        "name": "",
        "openTime": "",
        "operationStatus": "",
        "operationStatusMsg": "",
        "platformAdmin": "",
        "businessType": "",
        "platformNo": "",
        "platformType": "",
        "platformWebsiteUrl": "",
        "registerUnit": "",
        "selfBusinessNum": "",
        "sevicerNum": "",
        "socialCreditCode": "",
        "taskNum": "",
        "bankNo": "",
        "bankName": "",
        "updateTime": "",
        "platformAgreementModelUrl": "" // 平台协议
      },
      rules: {
        name: [{ required: true, message: "请输入平台名称", trigger: "blur" }],
        address: [{ required: true, message: "请输入企业地址", trigger: "blur" }],
        enterpriseName: [{ required: true, message: "请输入企业名称", trigger: "blur" }],
        legalName: [{ required: true, message: "请输入法人名称", trigger: "blur" }],
        createTime: [{ required: true, message: "请选择公司成立时间", trigger: "change" }],
        businessType: [{ required: true, message: "请选择企业类型", trigger: "change" }],
        industyCode: [{ required: true, message: "请选择所属行业", trigger: "change" }],
        operationStatus: [{ required: true, message: "请选择经营状态", trigger: "change" }],
        bankNo: [{ required: true, message: "请输入银行卡号", trigger: "blur" }],
        bankName: [{ required: true, message: "请输入银行名称", trigger: "blur" }],
        socialCreditCode: [{ required: true, message: "请输入统一社会信用代码", trigger: "blur" }],
        jingyingriqi: [{ required: true, message: "请选择经营日期", trigger: "change" }],
        registerUnit: [{ required: true, message: "请输入注册机关", trigger: "blur" }],
        businessScope: [{ required: true, message: "请输入经营范围", trigger: "blur" }],
        platformWebsiteUrl: [{ required: true, message: "请输入灵工平台地址", trigger: "blur" }],
        businessWebsiteUrl: [{ required: true, message: "请输入企业端地址", trigger: "blur" }],
        h5WebsiteUrl: [{ required: true, message: "请输入用户端H5地址", trigger: "blur" }],
        linkManName: [{ required: true, message: "请输入联系人姓名", trigger: "blur" }],
        linkManPhone: [{ required: true, message: "请输入联系人手机号", trigger: "blur" }],
        platformAdmin: [{ required: true, message: "请输入管理员账号", trigger: "blur" }],
      },
    };
  },
  mounted() {
    if(this.$route.query.id !== undefined) {
      this.detailsFlag = true
      this.getInfoData()
    }
  },
  methods: {
    removeFile(key) {
      // 删除文件
      this.createData[key] = ''
    },
    queryFile(url) {
      if(url.indexOf('.PDF') == -1 && url.indexOf('.pdf') == -1) {
        // image文件
        let newwin = window.open();
				newwin.document.write("<img src=" + url + " />");
      }else {
        // pdf文件
        this.$http({
					url: "/public/common/oss/pdfPreView",
					method: "post",
					params: {
						ossPath: url
					},
					responseType: 'blob'
				}).then((data) => {
					const blob = new Blob([data]);
					const href = window.URL.createObjectURL(blob)
					window.open('/pdfjs/web/viewer.html?file=' + encodeURIComponent(href))
				});
      }
    },
    getFileName(url) {
      // 根据路径获取文件名
      if(url == '' || url == null) return '-'
      let a = url.substring(0, url.indexOf('?'))
      return a.substring(a.lastIndexOf('/') + 1, a.length)
    },
    // 密码重置
    resetPassword() {
      this.createData.adminPassword = "123456"
    },
    // 营业执照图片上传
    async licenseUrlUpload(res, t) {
      if(t == 1) {
        // 营业执照
        await this.removeUpload(this.createData.licenseUrl)
      }else if(t == 2) {
        // 合同协议路径
        await this.removeUpload(this.createData.agreementUrl)
      }else if(t == 3) {
        // logo
        await this.removeUpload(this.createData.logoUrl)
      }else if(t == 4) {
        // logo
        await this.removeUpload(this.createData.platformAgreementModelUrl)
      }
      let formData = new FormData()
      formData.append('file', res.file)
      this.$http({
        url: "/api/oss/uploadBySingle",
        method: "post",
        headers: {
          "Content-Type": "multipart/form-data",
        },
        data: formData
      }).then((data) => {
        // console.log(data)
        if(data.code == 0) {
          if(t == 1) {
            // 营业执照
            this.createData.licenseUrl = data.result
          }else if(t == 2) {
            // 合同协议路径
            this.createData.agreementUrl = data.result
          }else if(t == 3) {
            // logo
            this.createData.logoUrl = data.result
          }else if(t == 4) {
            // logo
            this.createData.platformAgreementModelUrl = data.result
          }
        }
      });
    },
    removeUpload(url) {
      if(url == '') return
      // 删除上传文件
      this.$http({
        url: "/api/oss/deleteFileBySingle?fileUrl=" + url,
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
      }).then(() => {
      });
    },
    // 上传文件前校验
    beforeAvatarUpload(file) {
      const typeArr = ['image/jpeg', 'image/png', 'application/pdf']
      const isJPG = typeArr.includes(file.type)
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("格式不正确请重新上传");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    getInfoData() {
      // 获取详情
      this.$http({
        url: "/api/platform/management/selectPlatformDetailByNo",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          "platformNo": this.$route.query.id
        }
      }).then((data) => {
        if (data.code === 0 && data.result !== null) {
          // this.createData = data.result
          for(let key in data.result) {
            if(data.result[key] != null) {
              this.createData[key] = data.result[key]
            }
          }
          if(this.createData.openTime != null && this.createData.openTime != '') {
            this.jingyingriqi.push(this.createData.openTime)
          }
          if(this.createData.endTime != null && this.createData.endTime != '') {
            this.jingyingriqi.push(this.createData.endTime)
          }
        }
      });
    },
    createZhanghao() {
      // 新增或修改账号
      this.$refs.createData.validate((valid) => {
        if (valid) {
          this.createData.openTime = this.jingyingriqi[0]
          this.createData.endTime = this.jingyingriqi[1]
          // 所属行业
          this.createData.industyMsg = this.$refs.industyValue.selectedLabel
          // 经营状态
          this.createData.operationStatusMsg = this.$refs.operationStatus.selectedLabel
          
          this.$http({
            url: "/api/platform/management/updateAndInsertPlatformDetail",
            method: "post",
            headers: {
              "Content-Type": "application/json",
            },
            data: this.createData
          }).then((data) => {
            if(data.code == 0) {
              this.$router.push({name: 'accountManagement'})
            }
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  },
};
</script>
<style lang="scss" scoped>
.createAccount {
  font-size: 14px;
  * {
    color: #0a2e6a;
  }
  .title {
    padding-left: 59px;
    margin-top: 32px;
  }
  .content {
    display: flex;
    justify-content: center;
    .form-createData {
      width: 600px;
      margin-left: -80px;
      .create-button {
        border-color: #326CF0;
        color: #326CF0;
      }
      & :deep(.el-form-item__label) {
        color: #6C8198;
      }
      & :deep(.el-input-group__prepend),
      & :deep(.el-textarea__inner),
      & :deep(.el-input__inner) {
        border-color: #EEF4FB;
      }
      & :deep(.el-form-item.is-error) {
        .el-input__inner {
          border-color: #F56C6C;
        }
      }
      .create-submit {
        width: 220px;
        height: 40px;
        background: #326CF0;
        border-radius: 6px;
        color: #C4D1DF;
        margin-left: 90px;
        margin-top: 80px;
      }
      & :deep(.el-date-editor--date) {
        width: 100%;
        .el-input__prefix {
          right: 5px;
          left: auto;
        }
      }
      & :deep(.el-date-editor--daterange) {
        width: 100%;
        position: relative;
        .el-icon-date {
          position: absolute;
          right: 5px;
        }
      }
      & :deep(.el-select) {
        width: 100%;
      }
      .upload-desc {
        display: flex;
        align-items: center;
        .desc {
          margin-left: 5px;
          color: #95a8be;
          line-height: 14px;
          font-size: 12px;
        }
      }
      .avatar-uploader {
        & :deep(.el-upload--text) {
          width: 80px;
          height: 60px;
          background: #eef4fb;
          border-radius: 5px;
          border: 1px solid #e3effd;
          display: flex;
          overflow: inherit;
          .upload-box {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            img {
              max-width: 100%;
              max-height: 100%;
            }
            i {
              position: absolute;
              top: -6px;
              right: -6px;
              color: #de0000;
              cursor: pointer;
            }
          }
        }
      }
      .photo-uploader {
        & :deep(.el-upload--text) {
          width: 80px;
          height: 80px;
          border: 0;
          border-radius: 50%;
          overflow: hidden;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
}

.flagXingxing {
  & :deep(.el-form-item__label::before) {
    content: "" !important;
  }
}

.desc-chakan {
  margin: 6px 0 0 6px;
  span {
    cursor: pointer;
    color: #026BE4;
  }
  i {
    font-style: normal;
    margin-right: 10px;
  }
}
</style>
